
<template>
    <div id="app" class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 py-8 px-4">
      <div class="max-w-4xl mx-auto">
        <!-- 标题区域 -->
        <header class="text-center mb-12">
          <h1 class="text-4xl font-bold text-gray-800 mb-4">随机数生成器</h1>
          <p class="text-gray-600 text-lg">点击按钮生成10个0-100之间的随机整数</p>
        </header>
  
        <!-- 主功能区域 -->
        <main class="bg-white rounded-2xl shadow-xl p-8 mb-8">
          <!-- 控制面板 -->
          <div class="flex justify-center mb-8">
            <button 
              @click="randNum"
              class="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white font-semibold py-4 px-8 rounded-full shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-blue-300"
            >
              <i class="fas fa-dice mr-2"></i>
              生成随机数
            </button>
          </div>
  
          <!-- 结果显示区域 -->
          <div v-if="randomNumbers.length > 0" class="mt-8">
            <h3 class="text-xl font-semibold text-gray-700 mb-4 text-center">生成的随机数：</h3>
            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4">
              <div 
                v-for="(item, index) in randomNumbers" 
                :key="index"
                class="bg-gradient-to-br from-green-100 to-blue-100 border-2 border-green-200 rounded-xl p-4 text-center shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1"
              >
                <span class="text-2xl font-bold text-gray-800">{{ item }}</span>
                <div class="text-xs text-gray-500 mt-1">序号 {{ index + 1 }}</div>
              </div>
            </div>
            
            <!-- 统计信息 -->
            <div class="mt-6 bg-gray-50 rounded-lg p-4">
              <div class="flex justify-between items-center text-sm text-gray-600">
                <span>最大值: <strong class="text-red-500">{{ Math.max(...randomNumbers) }}</strong></span>
                <span>最小值: <strong class="text-green-500">{{ Math.min(...randomNumbers) }}</strong></span>
                <span>平均值: <strong class="text-blue-500">{{ (randomNumbers.reduce((a, b) => a + b, 0) / randomNumbers.length).toFixed(1) }}</strong></span>
              </div>
            </div>
          </div>
  
          <!-- 初始状态提示 -->
          <div v-else class="text-center py-12">
            <i class="fas fa-dice text-6xl text-gray-300 mb-4"></i>
            <p class="text-gray-500 text-lg">点击上方按钮开始生成随机数</p>
          </div>
        </main>
  
        <!-- 页脚信息 -->
        <footer class="text-center text-gray-500 text-sm">
          <p>每次生成10个0-100之间的随机整数</p>
        </footer>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from "vue";
  
  // 生成10个0-100之间的随机整数
  const randomNumbers = ref([]);
  
  const randNum = () => {
    const newNumbers = [];
    for (let i = 0; i < 10; i++) {
      const randomNum = Math.floor(Math.random() * 101);
      newNumbers.push(randomNum);
    }
    randomNumbers.value = newNumbers;
  }
  </script>
  
  <style>
  @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css');
  @import url('https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css');
  
  /* 自定义动画效果 */
  .fade-enter-active, .fade-leave-active {
    transition: all 0.5s ease;
  }
  .fade-enter-from, .fade-leave-to {
    opacity: 0;
    transform: translateY(20px);
  }
  
  /* 响应式设计优化 */
  @media (max-width: 640px) {
    #app {
      padding: 1rem;
    }
  }
  </style>
